<template>
    <div class="createGrid">
        <h3 class="title">添加</h3>
        <div class="forms">
            <el-form ref="formData" class="emitMsg" :inline="true" :model="formData" label-width="110px" size="small"
                min-width="550px" :rules="rules">
                <div class="row">
                    <el-form-item label="任务名称:" prop="name">
                        <el-input type="text" v-model="formData.name" style="width: 567px"></el-input>
                    </el-form-item>
                </div>
                <div class="row">
                    <el-form-item label="任务描述:" prop="description">
                        <el-input type="textarea" v-model="formData.description" :cols="74"></el-input>
                    </el-form-item>
                </div>
                <div class="row">
                    <el-form-item label="主要责任人:" prop="main_people">
                        <el-autocomplete :trigger-on-focus="false" v-model="formData.main_people" :fetch-suggestions="querySearchAsync" @select="handleSelect" style="width: 220px"></el-autocomplete>
                    </el-form-item>
                </div>
                <div class="row">
                    <el-form-item label="涉及项目组:" prop="relation_team">
                        <el-checkbox-group v-model="formData.relation_team">
                            <el-checkbox v-for="item in relation_team" :key="item.value" :label="item.value">{{item.label}}</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </div>
                <div class="row">
                    <el-form-item label="优先级:" prop="level">
                        <el-select v-model="formData.level" filterable style="width: 220px">
                            <el-option v-for="item in level" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="代码量:" prop="code_count">
                        <el-input type="text" v-model="formData.code_count" style="width: 220px"></el-input>
                    </el-form-item>
                </div>
                <div class="row">
                    <el-form-item label="计划完成时间:" prop="suppose_end_time">
                        <el-date-picker v-model="formData.suppose_end_time" type="date" placeholder="请选择"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="产品:" prop="product">
                        <el-input type="text" v-model="formData.product" style="width: 220px"></el-input>
                    </el-form-item>
                </div>
                <div class="row">
                    <el-form-item label="来源:" prop="source">
                        <el-input type="text" v-model="formData.source" style="width: 220px"></el-input>
                    </el-form-item>
                    <el-form-item label="任务分类:" prop="type">
                        <el-input type="text" v-model="formData.type" style="width: 220px"></el-input>
                    </el-form-item>
                </div>
                <div class="row">
                    <el-form-item label="产品属性:" prop="property">
                        <el-select v-model="formData.property" filterable style="width: 220px">
                            <el-option v-for="item in property" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="状态:" prop="state">
                        <el-select v-model="formData.state" filterable style="width: 220px">
                            <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <div class="row">
                    <el-form-item>
                        <el-checkbox-group v-model="formData.keep_word">
                            <el-checkbox label="对外承诺" :checked="formData.keep_word">对外承诺</el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </div>
            </el-form>
            <el-button type="primary" @click="submitGrid">保存</el-button>
            <el-button type="info" plain @click="back">返回</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'createGrid',
        data() {
            // 责任人验证规则
            var validatorPass = (rule, value, callback)=> { 
                let all = this.all_people;
                for ( let i = 0, len = all.length; i< len; i++) {
                    if(all[i].value == value) {
                        callback()
                        break;
                    } else if ((len - 1) <= i && all[len-1] != value) {
                        callback(new Error("请选择责任人"))
                    }
                }
            };
            return {
                all_people: '',
                formData: {
                    name: '',
                    description: '',
                    relation_team: [],
                    main_people: '',
                    code_count: '',
                    suppose_start_time: new Date().getTime(),
                    suppose_end_time: new Date().getTime(),
                    level: '',
                    product: '',
                    source: '',
                    type: '',
                    property: '',
                    keep_word: true,
                    state: '',
                    logs: [],
                    current_dealers: [],
                    delay: 0,
                    process: [
                        //['wangchengxiang/KF6868', 1]
                    ]
                },
                rules: {
                    name: [
                        { required: true, message: '请输入任务名称', trigger: ['blur', 'change'] }
                    ],
                    relation_team: [
                        { required: true, message: '请选择涉及项目组', trigger: ['blur', 'change'] }
                    ],
                    main_people: [
                        { required: true, message: '请选择主要责任人', validator: validatorPass, trigger: ['blur', 'change']}
                    ],
                    level: [
                        { required: true, message: '请选择优先级', trigger: ['blur', 'change'] }
                    ]
                },
                level: [
                    { label: '1', value: 1 },
                    { label: '2', value: 2 },
                    { label: '3', value: 3 },
                    { label: '4', value: 4 },
                    { label: '5', value: 5 }
                ],
                relation_team: [
                    { label: 'WEB', value: 'WEB' },
                    { label: 'APP', value: 'APP' },
                    { label: 'APP1', value: 'APP1' },
                    { label: 'UIS', value: 'UIS' },
                    { label: 'BMC', value: 'BMC' }
                ],
                property: [
                    { label: '基本功能', value: 1 },
                    { label: '可维护性', value: 2 },
                    { label: '增强功能', value: 3 },
                ],
                statusList: [
                    { label: '未排队', value: 1 },
                    { label: '排队中', value: 2 },
                ]
            }
        },
        computed: {},
        methods: {
            // 责任人查询
            querySearchAsync(queryString, cb) {
                let restaurants = this.all_people;
                if(this.all_people.length > 0) {
                    console.log('====11111=')
                    let results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;
                    clearTimeout(timeOut);
                    let timeOut = setTimeout(() => {
                        cb(results);
                    }, 500);
                } else {
                    console.log('===2222==')
                    this.getManpower(queryString, cb);
                }
            },
            getManpower(queryString, cb) {
                this.$api.searchManpower({message: queryString}).then(res => {
                    if (res.code === 0) {
                        this.all_people = res.data.list;
                        this.all_people.map((res) => {
                            res.value = res.message;
                        })
                    }
                    this.querySearchAsync(queryString, cb)
                })
            },
            createStateFilter(queryString) {
                return (state) => {
                    console.log(state)
                    return (state.message.toLowerCase());
                };
            },
            // 选择责任人
            handleSelect(item) {
            },
            // 提交表格
            submitGrid() {
                this.all_people.map(item => {   // 提交表单时验证是否有勾选责任人所在组
                    if( item.value.match(this.formData.main_people) && this.formData.main_people !== '') {
                        let team = item.group;
                        this.formData.relation_team.indexOf(team) > -1 ? this.formData.relation_team : this.formData.relation_team.push(team)
                    }
                })
                this.formData.current_dealers = this.formData.main_people;
                this.formData.process.push([this.formData.main_people, 0])
                this.$refs['formData'].validate((valid) => {
                    if (valid) {
                        this.$api.submitGrid(this.formData).then(res => {
                            if (res.code === 10) {
                                console.log(this.formData)
                                this.$refs['formData'].resetFields();
                            }
                        })
                    } else {
                        return false;
                    }
                });
            },
            back() {
                this.$router.push('home');
            }
        },
        created() {
            // let dd = {
            //     work_id: "11126",
            //     cn_name: 'APP组员6',
            //     en_name: 'appzuyuan6',
            //     tasks: [],
            //     group:'APP1',
            //     leader: '11121'
            //     "message" : "linmin/11488"
            // }
            // this.$api.addpeople(dd).then(res => {
            //     console.log(dd)
            // })
        }
    }
</script>
<style lang="less" scoped>
    .createGrid {
        padding: 0 40px;

        h3 {
            font-size: 24px;
            color: #045fbb;
            line-height: 100px;
        }
    }
</style>